<template>
  <button 
    class="theme-toggle-btn"
    @click="toggleTheme"
    :title="themeLabel"
    :aria-label="themeLabel"
  >
    <span class="theme-icon">{{ themeIcon }}</span>
    <span v-if="showLabel" class="theme-text">{{ themeLabel }}</span>
  </button>
</template>

<script setup lang="ts">
import { useTheme } from '../composables/useTheme'

interface Props {
  showLabel?: boolean
  size?: 'small' | 'medium' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  showLabel: false,
  size: 'medium'
})

const { themeIcon, themeLabel, toggleTheme } = useTheme()
</script>

<style scoped>
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.theme-toggle-btn:hover {
  background-color: var(--bg-card);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.theme-toggle-btn:active {
  transform: translateY(0);
}

.theme-icon {
  font-size: 16px;
  line-height: 1;
}

.theme-text {
  font-size: 14px;
  white-space: nowrap;
}

/* Size variations */
.theme-toggle-btn.small {
  padding: 6px 8px;
  font-size: 12px;
}

.theme-toggle-btn.small .theme-icon {
  font-size: 14px;
}

.theme-toggle-btn.small .theme-text {
  font-size: 12px;
}

.theme-toggle-btn.large {
  padding: 12px 16px;
  font-size: 16px;
}

.theme-toggle-btn.large .theme-icon {
  font-size: 20px;
}

.theme-toggle-btn.large .theme-text {
  font-size: 16px;
}
</style>